<template>
  <div id="bg" :class="{ hidden: !selfShow }">
    <div
      style="
        width: 750px;
        padding-bottom: 40px;
        margin: 0px auto;
        background: #ffffff;
        border-radius: 10px;
      "
      id="mg"
    >
      <div class="top">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <span
            class="s1 el-icon-close"
            style="margin-left: 40px; color: #4381e6"
          ></span>
          <span class="order-title">{{ $t("resourceOrder.orderInfo") }}</span>
          <span
            class="s1 el-icon-close"
            @click="onClose"
            style="margin-right: 30px"
          ></span>
        </div>
      </div>
      <div class="main" v-if="customData !== null">
        <div class="container">
          <div class="d1">
            <span>{{ $t("resourceOrder.orderNo") }}</span>
            <div class="d2">
              <span>{{ customData.orderNo }}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{ $t("resourceOrder.orderTime") }}</span>
            <div class="d2">
              <span>{{ customData.createDate }}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{ $t("Info.account") }}</span>
            <div class="d2">
              <span>{{ customData.account }}</span>
            </div>
          </div>
        </div>
        <template>
          <el-table border :data="customData.pageInfo.list" style="width: 100%">
            <el-table-column
              align="center"
              prop="date"
              label="封面预览"
              width="180"
            >
              <template slot-scope="scope">
                <img :src="scope.row.resourceUrl" style="width: 40%" alt="" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="resourceName"
              label="资源名称"
              width="180"
            >
            </el-table-column>
            <el-table-column align="center" prop="purchaseNum" label="购买数量">
              <template slot-scope="scope">
                x{{ scope.row.purchaseNum }}
              </template> </el-table-column
            ><el-table-column
              align="center"
              prop="resourceUnitPrice"
              label="单个价格"
            >
              <template slot-scope="scope">
                ￥{{ scope.row.resourceUnitPrice }}
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="container">
          <!--分页-->
          <div
            style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              margin-top: 25px;
              padding-bottom: 5px;
            "
          >
            <div class="block">
              <el-pagination
                @current-change="getChange(page4)"
                :current-page.sync="page4"
                layout="prev,pager,next"
                :page-size="pageSize"
                :total="commonTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <!--总价-->
        <div class="container">
          <hr />
          <div class="d5">
            <span style="margin-left: 300px" class="s6"
              >{{ $t("resourceOrder.totalOrders") }}:</span
            >
            <span class="s7" style="margin-right: 20px"
              >￥ {{ totalAmount }}</span
            >
          </div>
          <div class="d6">
            <span style="margin-left: 300px; margin-top: 5px" class="s6"
              >{{ $t("resourceOrder.totalPay") }}:</span
            >
            <span class="s8">￥ {{ totalAmount }}</span>
          </div>
          <div class="d7" v-if="myIndex == 0">
            <span class="s9">{{ $t("resourceOrder.orderPayed") }}</span>
          </div>
          <div class="d7" v-if="myIndex == 3">
            <span class="s9">{{ $t("resourceOrder.orderCompleted") }}</span>
          </div>
          <div class="d7" v-if="myIndex == 2">
            <span class="s9">{{ $t("resourceOrder.orderCancel") }}</span>
          </div>
          <div class="d7" v-if="myIndex == 1">
            <div class="d8" :class="[culture === 'zh-cn' ? '' : 'd8-active']">
              <button class="btn3" @click="cancelOrder(customData.orderNo)">
                {{ $t("resourceOrder.cancelOrder") }}
              </button>
              <button class="btn4" @click="pay">
                {{ $t("resourceOrder.nowPay") }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden="tips">
      <img :src="resultIcon" />
      <span>{{ msg }}</span>
    </div>
    <PaySlot
      :payTotal="payTotal"
      :myOrderNo="myOrderNo"
      v-on:listenChild="showChildMsg"
    ></PaySlot>
  </div>
</template>

<script>
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";
import PaySlot from "../../components/custom/PaySlot";
import util from "../../common/util";
import encryption from "../../common/encryption";
import { Container } from "element-ui";

let orderNo;

export default {
  name: "CustomOrder",
  components: { PaySlot },
  data() {
    return {
      selfShow: false,
      resultIcon: "../assets/images/icon_error.png",
      msg: "",
      tips: true,
      resourceList: null,
      myIndex: 0,
      customData: null,
      page4: 1,
      commonTotal: 0,
      pageSize: 5,
      payTotal: 0,
      myOrderNo: "",
      day: "",
      culture: "",
    };
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "overflow-x:hidden");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  created() {
    this.culture = this.$route.query.culture;
  },
  mounted() {
    /**
     * 打开订单弹窗，初始化数据
     */
    let that = this;
    bus.$on("showCustomRes", function (t, m) {
      console.log(t, m);
      that.myIndex = m;
      that.selfShow = true;
      orderNo = t;
      loadCustomDetail(1, that);
    });
  },
  methods: {
    /**
     * 监听父组件方法，支付后立即刷新订单列表
     */
    showChildMsg() {
      this.$emit("listenCustom");
      this.myIndex = 0;
    },

    /**
     * 打开支付弹窗
     */
    pay() {
      bus.$emit("showPayDetail");
    },

    /**
     * 取消订单
     */
    cancelOrder(id7) {
      let that = this;
      console.log(id7);
      ajax.post({
        url: api.customDetail.routeName + api.customDetail.children.cancel,
        data: {
          orderNo: id7,
        },
        success: function () {
          that.$message.success("取消订单成功");
          that.myIndex = 2;
        },
      });
      this.$emit("listenCustom");
    },

    /**
     * 关闭订单弹窗
     */
    onClose() {
      this.selfShow = false;
    },

    /**
     * 资源订单时间格式转换
     */
    loadCustomDate() {
      this.customData.createDate = util.formate(this.customData.createDate);
    },

    /**
     * 分页方法
     */
    getChange(val) {
      console.log(val);
      loadCustomDetail(val, this);
    },
  },
};

/**
 * 分页获取订单详情
 */
function loadCustomDetail(page4, that) {
  console.log(page4);
  ajax.get({
    url: api.customDetail.routeName + api.customDetail.children.detail,
    data: {
      orderNo: orderNo,
      pageNo: page4,
      pageSize: 5,
    },
    success(res) {
      that.customData = JSON.parse(encryption.decryptionMxr(res));
      console.log(that.customData);
      that.price = that.customData.pageInfo.list;
      that.a = that.price.map((item) => Number(item.resourceTotalPrice));
      that.totalAmount = that.a.reduce((a, b) => {
        return a + b;
      });
      that.payTotal = that.totalAmount;
      that.commonTotal = that.customData.pageInfo.total;
      that.myOrderNo = that.customData.orderNo;
      that.loadCustomDate();
    },
    error(e) {
      console.log(e);
    },
  });
}
</script>

<style scoped>
.order-title {
  font-size: 30px;
  color: white;
  letter-spacing: 3px;
}

.s1 {
  font-size: 26px;
  color: white;
  margin-top: 5px;
}

.s1:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

.top {
  height: 55px;
  background: #4381e6;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 25px;
}

::-webkit-scrollbar {
  width: 2px;
}

.title {
  font-size: 20px;
  font-weight: bolder;
  display: block;
}

.container {
  width: 600px;
  margin: 25px auto;
}

.d1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
  margin-left: 10px;
}

.d2 {
  width: 330px;
  text-align: center;
}

.tips {
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: fixed;
  top: 0;
  left: 40%;
  width: auto;
  height: 65px;
  z-index: 99;
}

.tips img {
  width: 30px;
  height: 30px;
  position: relative;
  margin-top: 18px;
  margin-left: 66px;
}

.tips span {
  font-size: 15px;
  color: #3c3c3c;
  letter-spacing: -0.05px;
  line-height: 16px;
  display: inline-block;
  position: relative;
  top: -8px;
  margin-left: 13px;
  padding-right: 66px;
}

.d3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}

.s2 {
  font-size: 16px;
  font-weight: bolder;
}

.d4 {
  margin-top: 10px;
}

.s3 {
  font-size: 14px;
  color: red;
}

.s4 {
  font-size: 14px;
  color: grey;
}

.d5 {
  width: 500px;
  margin-top: 20px;
  margin-left: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.d6 {
  margin-left: 100px;
  width: 500px;
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.s6 {
  font-size: 14px;
  font-weight: bolder;
}

.s7 {
  font-size: 14px;
}

.s8 {
  font-size: 20px;
  font-weight: bolder;
  color: red;
}

.btn4 {
  height: 35px;
  background: #4a90e2;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 14px;
  float: right;
  padding-left: 18px;
  padding-right: 18px;
}

.btn4:hover {
  cursor: pointer;
}

.d7 {
  margin-left: 110px;
  width: 500px;
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.s9 {
  font-size: 18px;
  font-weight: bolder;
  color: gray;
  margin-right: 10px;
}

.d8 {
  width: 320px;
  margin-right: 5px;
  float: right;
}

.d8-active {
  width: 345px;
}

.btn3 {
  width: 100px;
  height: 35px;
  border: none;
  border-radius: 3px;
  background: white;
  font-size: 14px;
  color: #f5a623;
  margin-left: 94px;
}

.btn3:hover {
  cursor: pointer;
}
</style>
